<script setup>
const accountTableData = [
  {
    username: 'admin',
    name: 'admin',
    age: 18,
    gender: 'male',
    phone: '12300000000',
    address: 'xx市xx区xx镇xx村xx小区',
    status: 'enable',
  },
  {
    username: 'leader',
    name: 'leader',
    age: 18,
    gender: 'male',
    phone: '12300000000',
    address: 'xx市xx区xx镇xx村xx小区',
    status: 'enable',
  },
  {
    username: 'user',
    name: 'user',
    age: 18,
    gender: 'male',
    phone: '12300000000',
    address: 'xx市xx区xx镇xx村xx小区',
    status: 'enable',
  },
]

const orgTreeData = [
  {
    label: '总公司',
    children: [
      {
        label: '分公司1',
        children: [
          {
            label: '研发部门',
          },
          {
            label: '测试部门',
          },
        ],
      },
      {
        label: '分公司2',
        children: [
          {
            label: '研发部门',
          },
          {
            label: '测试部门',
          },
        ],
      },
    ],
  },
]

const defaultProps = {
  children: 'children',
  label: 'label',
}
</script>

<template>
  <div style="display:flex; width: 200px">
    <el-tree
        default-expand-all
        :data="orgTreeData"
        :props="defaultProps"
    />
  </div>
  <div style="display: flex; flex-flow: column nowrap; width: 100%; height: 100%; overflow: hidden;">
    <div style="display: flex; flex-flow: row nowrap; align-items: center; height: 40px;">
      <el-form :inline="true" style="height: 30px">
        <el-form-item label="Name">
          <el-input clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleDictList">Search</el-button>
          <el-button type="primary" @click="handleDictCreate({})">New</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="display: flex; width: 100%; height: 100%; overflow: auto;">
      <el-table
          highlight-current-row
          :data="accountTableData" border style="width: 100%;">
        <el-table-column type="expand">
          <template #default="props">
            <el-descriptions border>
              <el-descriptions-item label="姓名">{{ props.row.name }}</el-descriptions-item>
              <el-descriptions-item label="年龄">{{ props.row.age }}</el-descriptions-item>
              <el-descriptions-item label="性别">{{ props.row.gender }}</el-descriptions-item>
              <el-descriptions-item label="电话">{{ props.row.phone }}</el-descriptions-item>
              <el-descriptions-item label="地址">
                {{ props.row.address }}
              </el-descriptions-item>
            </el-descriptions>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="Username" min-width="200"/>
        <el-table-column prop="status" label="Status" width="70">
          <template #default="scope">
            <el-switch
                active-value="enable"
                inactive-value="disable"
                v-model="scope.row.status "
            />
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="sort" width="60"/>
        <el-table-column label="operations" width="180">
          <template #default="scope">
            <el-button @click="handleEdit(scope.$index, scope.row)">
              Edit
            </el-button>
            <el-popconfirm
                width="170"
                hide-icon
                confirm-button-text="确定"
                cancel-button-text="取消"
                :title="'是否确认删除账户数据 [ ' + scope.row.name + ' ] ？'">
              <template #reference>
                <el-button type="danger">
                  Delete
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="flex: none; display: flex; flex-flow: row nowrap; align-items: center; height: 36px; border-top: #5cadff 1px solid;">
      <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="1000"/>
    </div>
  </div>
</template>

<style scoped>
</style>